"use client";

import * as React from "react";
import { useActionState, useState } from "react";
import { executeSqlAction, type QueryResultState } from "./actions";
import { Textarea } from "@/components/ui/textarea";
import { Button } from "@/components/ui/button";
import { toast } from "sonner";

// CSV 변환 유틸
function convertToCSV(columns: string[], rows: Record<string, any>[]): string {
  const escape = (value: any) => {
    if (value === null || value === undefined) return "";
    const str = String(value).replace(/"/g, '""');
    return `"${str}"`;
  };

  const header = columns.map(escape).join(",");
  const lines = rows.map((row) =>
    columns.map((col) => escape(row[col])).join(",")
  );
  return [header, ...lines].join("\r\n");
}
// ────────────────────────────────────────────────────────────────────────────────
// Main page component
// ────────────────────────────────────────────────────────────────────────────────

export default function SqlEditorPage() {
  const [query, setQuery] = useState<string>("");

  const initialState: QueryResultState = {
    columns: [],
    rows: [],
  };

  // useActionState: 서버 액션과 클라이언트 상태 연결
  const [state, formAction, isPending] = useActionState<
    QueryResultState,
    FormData
  >(executeSqlAction, initialState);

  // CSV 내보내기 핸들러
  const handleExportCSV = React.useCallback(() => {
    if (state.rows.length === 0) {
      toast.info("내보낼 결과가 없습니다.");
      return;
    }

    const csv = convertToCSV(state.columns, state.rows);
    const blob = new Blob([csv], { type: "text/csv;charset=euc-kr;" });
    const url = URL.createObjectURL(blob);
    const link = document.createElement("a");
    link.href = url;
    link.download = "query_result.csv";
    link.click();
    URL.revokeObjectURL(url);
  }, [state.columns, state.rows]);

  // 오류 toast 표시
  React.useEffect(() => {
    if (state.error) {
      toast.error(state.error);
    }
  }, [state.error]);

  return (
    <div className="w-full p-4 flex flex-col h-[100dvh] gap-4">
      {/* 상단: 쿼리 입력 영역 */}
      <form
        action={formAction}
        className="flex flex-col min-h-0 space-y-4 overflow-auto"
      >
        <Textarea
          name="query"
          className="flex font-mono text-sm"
          value={query}
          onChange={(e) => setQuery(e.target.value)}
          placeholder="조회가능스키마: public, mdg, nonsap, soap(로그스키마)"
          disabled={isPending}
        />
        <div className="flex justify-end gap-2">
          <p className="text-sm text-muted-foreground">조회된 행 수: {state.rows.length}</p>
          <div className="flex gap-2">
            <Button type="submit" disabled={isPending}>
              {isPending ? "실행 중..." : "실행"}
            </Button>
            <Button
              type="button"
              variant="outline"
              onClick={handleExportCSV}
              disabled={state.rows.length === 0}
            >
              CSV 내보내기
            </Button>
          </div>
        </div>
      </form>

      {/* 하단: 결과 테이블 영역 */}
      <div className="flex-1 overflow-auto p-4 border rounded-md">
        {state.rows.length === 0 ? (
          <p className="text-sm text-muted-foreground">
            {isPending
              ? "쿼리 실행 중"
              : "결과 여기 표시됨"}
          </p>
        ) : (
          <div className="w-full overflow-auto">
            <table className="w-full border-collapse text-sm">
              <thead>
                <tr>
                  {state.columns.map((col) => (
                    <th
                      key={col}
                      className="border bg-muted px-2 py-1 text-left font-medium"
                    >
                      {col}
                    </th>
                  ))}
                </tr>
              </thead>
              <tbody>
                {state.rows.map((row, rowIdx) => (
                  <tr key={rowIdx} className="odd:bg-muted/30">
                    {state.columns.map((col) => (
                      <td key={col} className="border px-2 py-1">
                        {row[col] === null || row[col] === undefined
                          ? "NULL"
                          : String(row[col])}
                      </td>
                    ))}
                  </tr>
                ))}
              </tbody>
            </table>
          </div>
        )}
      </div>
    </div>
  );
}